<template>
	<view class="container">
		<!-- 顶部 轮播图 -->
		<view class="header-box">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="false" :autoplay="true">
					<swiper-item v-for="url in swiperList" :key="url">
						<img style="width: 100%; height: 100%" :src="url" alt="" srcset="" />
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 顶部 轮播图 -->
		<view class="content-box">
			<view class="price-box">
				<view style="font-weight: 500;font-size: 52rpx;">310.00￥</view>
				<view class="integral">
					获得3积分
				</view>
			</view>
			<!-- 详情 -->
			<view class="title-box">丝康原平衡洗发水Spela707二型深层清洁强根</view>
			<view class="other-box">
				<view class="sales-volume">
					2131人购买/月销100+
				</view>
				<view style="font-size: 24rpx;margin-top:20rpx;"> <text>规格：120ml</text><text>正品保障</text> </view>
			</view>
			<!-- 评价 -->
			<view class="appraise-box">
				<view class="title-box">
					<view>商品评价（1231）</view>
					<view class="more" @click="moreClick">
						更多
						<view>
							<u-icon name='arrow-right'></u-icon>
						</view>
					</view>
				</view>
				<view class="appraise-list">
					<view class="appraise-item">
						<view class="img-box">
							<img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" alt="">
						</view>
						<view class="content">
							<view style="font-size: 28rpx;font-weight: 600;">王小明</view>
							<view style="font-size: 28rpx;display: flex;"><text>评分：</text> <u-rate count="5"
									v-model="mark"></u-rate>
							</view>
							<view style="font-size: 24rpx;color: #999;">
								撒吃撒菜市场撒大大十大吃撒擦拭撒吃撒菜市场撒大大十大吃撒擦拭撒吃撒菜市场撒大大擦拭
							</view>
							<view class="img-s">
								<u-album :urls="['https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
									'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
									'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
									'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
									'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF']" keyName="src2"></u-album>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 产品详情 -->
			<view class="detail-box">
				<view style="padding: 20rpx 0;">产品详情</view>
				<view class="detail-content">
					<rich-text>

					</rich-text>
				</view>
			</view>
		</view>
		<!-- 底部购买 -->
		<view class="footer-content">
			<view style="display: flex;;margin-left: 30rpx;">
				<view class="left-btn"><u-icon name="chat" size="36"></u-icon></view>
				<view class="left-btn"><u-icon name="shopping-cart" size="36"></u-icon></view>
			</view>
			<view style="display: flex;margin-right: 20rpx;align-items: center;">
				<view class="add-to-shopping-cart" @click="addShoppingCart">加入购物车</view>
				<view class="buy-now" @click="buyMethod">立即购买</view>
			</view>
		</view>
		<!-- 底部弹出窗 -->
		<u-popup :show="buyShow" @close="buyClose">
			<view class="popup-content">
				<view class="top-p">
					<view style="display: flex;">
						<img style="margin-right:10rpx;width: 15vw;height: 15vw;border-radius: 10rpx;"
							src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" alt="">
						<view>
							<view style="font-size: 32rpx;font-weight: 600;">xxx洗发水</view>
							<view style="font-size: 28rpx;">规格：210毫升</view>
							<view style="font-size: 24rpx;">售价：100元</view>
						</view>
					</view>
					<view>
						<u-icon name='close' size="28" @click="buyClose"></u-icon>
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
					<view>数量：</view>
					<view><u-number-box :min="1" v-model="numberIndex"></u-number-box></view>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 20rpx;align-items: center;">
					<view style="width: 45%;color: red;font-size:32rpx;">累计：{{100*numberIndex}}</view>
					<u-button type="error" shape='circle' text="确定" @click="paymentClick"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "",
				swiperList: [
					"https://cdn.uviewui.com/uview/swiper/swiper1.png",
					"https://cdn.uviewui.com/uview/swiper/swiper2.png",
					"https://cdn.uviewui.com/uview/swiper/swiper3.png",
				],
				list: [{
					name: '甄选精品',
				}, {
					name: '优质服务',
				}],
				mark: 0,
				buyShow: false,
				numberIndex: 1
			};
		},
		methods: {
			buyClose() {
				this.buyShow = false
			},
			buyMethod() {
				this.buyShow = true

			},
			moreClick() {
				uni.navigateTo({
					url: '/pages-shop/Evaluate/index'
				})
			},
			addShoppingCart() {
				uni.navigateTo({
					url: '/pages-shop/ShoppingCart/index'
				})
			},
			paymentClick() {
				uni.navigateTo({
					url: '/pages-shop/ShopPayment/index'
				})
			}
		},
		created() {
			console.log('首页created');
		},
		mounted() {
			console.log('首页mounted');
		}
	};
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>